<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta property="og:title" content="I am reading book ${book.name}, come and read with me." />
  <meta property="og:type" content="Book" />
  <meta property="og:image" content="${imageDomain}${book.cover}" />
  <meta property="og:url" content="http://${systemDomain!''}/book/detail/${book.id}" />
  <meta property="og:site_name" content="${systemDomain!''}" />
  <meta property="og:description" content="I am reading book ${book.name}, come and read with me." />
	
  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta charset="UTF-8" /> 
  <title>${book.name} - ${systemDomain!''}</title> 
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  <meta name="format-detection" content="telephone=no" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta name="description" content="Join us! Here we can read modern and classic books. All are free to read and download." /> 
  <meta name="keywords" content="${book.name},Best online books,free books" /> 
  <meta name="apple-mobile-web-app-capable" content="no" /> 
  <link href="/css/book/book_detail.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
	var domain = 'HiBook';
	var page = "detail";
  </script> 
  <#include "/no_iframe.ftl">
 </head> 
 <body style="background-color: #fcfff6;"> 
 
 <div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&autoLogAppEvents=1&version=v3.2&appId=2234659010126491';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

  <header> 
   <div id="d-back" class="d-back"> 
    <a href="/books/"><img src="/images/game/back.png" /></a> 
   </div> 
  </header> 
  <section class="det-intro-top"> 
   <div class="det-topbg"> 
    <img src="/images/books/read_background.png" /> 
   </div> 
   <div class="gameIntroCtn"> 
    <div class="det-intro"> 
     <div id="gameicon" class="det-icon"> 
      <img id="detail_image" src="${imageDomain}${book.cover}" class="game-img">
     </div> 
     <div class="det-info"> 
      <p id="gamename" class="det-info-sub   det-game-name">${book.name!''}</p> 
      <div class="det-info-sub det-times"> 
       <img src="/images/books/read.png" />
       <span id="playtimes">${book.readTimes!'567654'}</span> 
      </div> 

      </div> 
     </div> 
    </div> 
   </div> 
  </section> 
  <section class="ad-section"> 
   <div class="ad-big" id="detail-ad-big" style="padding-top: 10px;">
   	<script type="text/javascript" src="/js/ads.js"></script>
   </div> 
  </section> 
  <section>
	  <div class="det-introduceCtn" style="border-bottom: 1px solid gray;"> 
	   <p class="introduce-title"> Book introduce </p> 
	   <p id="gamedesc" class="gamedesc">${book.firstChapter.lessContent!''}</p> 
	  </div> 
  </section>
  <section class="ad-section"> 
   <div class="ad-small" id="ad-small"> 
   <script type="text/javascript" src="/js/ads.js"></script>
   </div> 
  </section> 
  <section> 
   <div> 
   	<p class="introduce-title"> Table of Contents </p> 
   	<ol>
    <#if bookChapterList??>
    	<#assign currentIndex=1>
    	<#list bookChapterList as bookChapter>
     		<li><a href="/books/chapter/${book.id}/${bookChapter.chapterIndex}" class="chapterList">${currentIndex}.${bookChapter.name}</a></li>
     		<#assign currentIndex=currentIndex+1>
     	</#list>
    </#if>
    </ol>
   </div> 
  </section> 
  <section id="recomd-sect" class="recomd-sect">
  	<p class="introduce-title"> Books Recommended </p> 
  	<#if bookRecommendList??>
    	<#assign currentIndex=0>
    	<#list bookRecommendList as bookRecommend>
    		<#assign currentIndex=currentIndex+1>
    		<li>
    			<a href="/books/detail/${bookRecommend.id!''}">
    				<div class="recomd-iconCtn">
    					<img src="${imageDomain}${bookRecommend.cover}" id="recommend_image_${bookRecommend.id!''}">
    				</div>
    				<div class="recomd-simpleinfo">
    					<p>${bookRecommend.name!''}</p>
    					<p><img src="/images/books/read.png"><span id="recomd-playtimes">&nbsp;${bookRecommend.readTimes!''}</span></p>
    				</div>
    			</a>
    		</li>
    		<#if currentIndex==3>
      			<script type="text/javascript" src="/js/ads.js"></script>
      		</#if>
    	</#list>
    </#if>
  </section> 
  <section class="ad-section" style="margin-top: 10px;"> 
   <div class="ad-big" id="detail-ad-end">
   	<script type="text/javascript" src="/js/ads.js"></script>
   </div> 
  </section> 
  <section> 
  <div class="fb-comments" data-href="${httpProtocol}://${systemDomain}/books/detail/${book.id}" data-width="100%" data-numposts="5"></div>
  </section> 
  <footer> 
   <div class="copyright">
    <#include "/footer_noaddthis.ftl">
	<script type="text/javascript">
	var addthis_share = {
	   url: "http://${systemDomain!''}/books/detail/${book.id}",
	   title: "I am reading book ${book.name}, come and read with me.",
	   media: "${imageDomain}${book.cover}"
	}
	</script>
	<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5812f15f9dbbd1cb"></script>
   </div> 
  </footer> 
 </body>
</html>